<template>
  <!-- 封装采用 Symbol 方式使用图标的组件 -->
  <!-- 对阿里图标库采用 Symbol 方式使用图标的封装 -->
  <svg class="icon" aria-hidden="true">
    <use ref="iconComponentUseEl" xlink:href="#icon-xxx"></use>
  </svg>
</template>

<script setup lang="ts">
const props = defineProps<{
  // 图标名称(不带前面的 icon-)
  iconName: string
}>()

// 通过 ref 获取 use 元素
const iconComponentUseEl = ref<SVGUseElement | null>(null)

// 组件挂载后，设置图标
onMounted(() => {
  const useEl = iconComponentUseEl.value as SVGUseElement
  useEl.href.baseVal = `#icon-${props.iconName}`
})
</script>

<style scoped lang="scss"></style>
